<template>
  <div class="home">
    <!-- 搜索 -->
    <van-search
      v-model="value"
      @click="fun()"
      disabled
      shape="round"
      placeholder="请输入搜索关键词"
    />
    <!-- 搜索弹出框 -->
    <!-- <transition name="slide"> -->
    <transition name="van-slide-right">
      <router-view />
    </transition>
    <div v-show="$route.path === '/'">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989fa">
        <van-swipe-item v-for="v in banner" :key="v.id">
          <img :src="v.image_url" alt="" width="100%" />
        </van-swipe-item>
      </van-swipe>
      <!-- 图标导航栏 -->
      <van-grid :column-num="5">
        <van-grid-item
          v-for="(v,i) in channel"
          :key="v.id"
          :icon="v.icon_url"
          :text="v.name"
          @click="$router.push('/home/iconDetail/' + v.id+'/'+i)"
        />
      </van-grid>
      <!-- 品牌制造商直供 -->
      <div class="pinpai">
        <div class="title1">品牌制造商直供</div>
        <ul>
          <li
            v-for="v in brandList"
            :key="v.id"
            @click="$router.push('/brand/' + v.id)"
          >
            <img :src="v.pic_url" alt="" width="100%" />
            <h4>{{ v.name }}</h4>
            <p>{{ v.floor_price | fun_qian }}</p>
          </li>
        </ul>
      </div>
      <!-- 周一周四,新品首发 -->
      <div class="newgoods">
        <div class="title1">周一周四,新品首发</div>
        <ul>
          <li
            v-for="v in newGoodsList"
            :key="v.id"
            @click="$router.push('/goodsDetail/' + v.id)"
          >
            <img :src="v.list_pic_url" alt="" width="100%" />
            <h4>{{ v.name }}</h4>
            <p>{{ v.retail_price | fun_qian }}</p>
          </li>
        </ul>
      </div>
      <!-- 人气推荐 -->
      <div class="rqtj">
        <div class="title1">人气推荐</div>
        <van-card
          v-for="v in hotGoodsList"
          :key="v.id"
          :price="v.retail_price | fun_qian1"
          :desc="v.goods_brief"
          :title="v.name"
          :thumb="v.list_pic_url"
          @click="person_tui()"
        />
      </div>
      <!-- 自定义轮播图 -->
      <div class="diy">
        <div class="title1">专题精选</div>
        <van-swipe :loop="false" :width="300" :show-indicators="false">
          <van-swipe-item
            v-for="(v, e) in topicList"
            :key="e"
            style="margin-right: 0.1rem"
          >
            <img :src="v.scene_pic_url" alt="" width="100%" height="280rem" />
            <h2 style="margin-bottom: 0.1rem">
              {{ v.title }}
              <span style="color: darkred">{{ v.price_info | fun_qian }}</span>
            </h2>
            <p
              style="
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 2.5rem;
              "
            >
              {{ v.subtitle }}
            </p>
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 一大片 -->
      <div class="big_long">
        <div v-for="v in categoryList" :key="v.id">
          <div class="title1">{{ v.name }}</div>
          <ul>
            <li v-for="m in v.goodsList" :key="m.id" @click="big_btn()">
              <img :src="m.list_pic_url" alt="" width="100%" />
              <h4>{{ m.name }}</h4>
              <p>{{ m.retail_price | fun_qian }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetHomeLists } from "@/request/api";
// import axios from "axios"
export default {
  name: "Home",
  data() {
    return {
      value: "",
      banner: [],
      channel: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
      categoryList: [],
    };
  },
  components: {},
  filters: {
    fun_qian(v) {
      let num = v.toFixed(2);
      return "￥" + num + "元";
    },
    fun_qian1(v) {
      let num = v.toFixed(2);
      return num + "元";
    },
  },
  methods: {
    big_btn() {
      this.$router.push("/404not");
    },
    person_tui() {
      this.$router.go(0);
    },
    fun() {
      // console.log(123);
      this.$router.push("/home/searchpopup");
    },
    // iconDetail() {
    //   this.$router.push("/home/iconDetail");
    // },
  },
  created() {
    GetHomeLists().then((res) => {
      if (res.errno == 0) {
        this.banner = res.data.banner;
        this.channel = res.data.channel;
        this.brandList = res.data.brandList;
        this.newGoodsList = res.data.newGoodsList;
        this.hotGoodsList = res.data.hotGoodsList;
        this.topicList = res.data.topicList;
        this.categoryList = res.data.categoryList;
      }
      //  console.log(res);
    });
  },
};
</script>
<style lang="less">
// 搜索弹出层
//  .slide-enter{
//    right: -100%;
//  }
//  .slide-enter-active{
//    transition: all 0.5s;
//  }
//  .slide-enter-to{
//    right: 0;
//  }
//品牌厂家直销
.pinpai {
  background-color: #fff;
  margin-top: 0.2rem;
  width: 100%;
  min-height: 100%;
}
.title1 {
  width: 100%;
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
  font-size: 0.2rem;
}
.pinpai ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pinpai ul li {
  width: 49%;
  margin-top: 0.05rem;
  position: relative;
}
.pinpai ul li img {
  display: block;
}
.pinpai li h4,
.pinpai li p {
  font-size: 0.16rem;
}
.pinpai li h4 {
  position: absolute;
  top: 0.15rem;
}
.pinpai li p {
  position: absolute;
  top: 0.4rem;
  color: #8b0000;
}
//  周一周四  新品首发
.newgoods {
  background-color: #fff;
  margin-top: 0.2rem;
  width: 100%;
  min-height: 100%;
}
.newgoods ul {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.newgoods ul li {
  width: 49%;
  min-height: 100%;
  margin-top: 10px;
}
.newgoods ul li h4,
.newgoods ul li p {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
.newgoods ul li p {
  color: #8b0000;
}
//人气推荐
.rqtj {
  background-color: #fff;
  margin-top: 0.2rem;
  width: 100%;
  min-height: 100%;
  .big {
    width: 100%;
    min-height: 1000%;
    .l {
      width: 30%;
      height: 1rem;
      float: left;
    }
    .r {
      width: 70%;
      height: 1rem;
      float: left;
      .p_big {
        font-size: 0.2rem;
        margin-top: 0.12rem;
      }
      .p_small {
        font-size: 0.18rem;
        margin-top: 0.12rem;
      }
      .pri {
        margin-top: 0.12rem;
        color: #8b0000;
      }
    }
  }
}
//专题精选
.diy {
  background-color: #fff;
  margin-top: 0.2rem;
  width: 100%;
  min-height: 100%;
  padding-bottom: 0.1rem;
}
.diy img {
  margin-bottom: 0.18rem;
}
//一大片
.big_long {
  background-color: #fff;
  margin-top: 0.2rem;
  width: 100%;
  min-height: 100%;
}
.big_long ul {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.big_long ul li {
  width: 49%;
  min-height: 100%;
  margin-top: 10px;
}
.big_long ul li h4,
.big_long ul li p {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
.big_long ul li p {
  color: #8b0000;
}
</style>
